<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../../css/api.css">

    <link rel="stylesheet" href="../../css/base_bai/base.css">

    <title>地址_编辑_添加</title>

    <style type="text/css">

    .van-nav-bar .van-icon{color:black;}

    .van-field{background-color: #F5F5F5;    margin: .3rem .2rem;   width: initial;border-radius: 0.05rem}

    .van-hairline--top-bottom {  position: initial;}

    .city_sty{color:#979899;}

    </style>

</head>

<body>

    <div id="app" v-cloak>

        <div>
            <van-nav-bar class="m-header" title="所在地区" left-arrow @click-left="closeWin()" />
        </div>

        <div>
            <van-cell-group>
                <van-field v-model="user_name" placeholder="收货人" /></van-cell-group>

            <van-cell-group>
                <van-field v-model="phone" placeholder="手机号码" /></van-cell-group>

            <div>
                <van-field right-icon="arrow" v-model="address_val" label-class="city_sty" label="所在地区" @click="showAddressChuang" />
            </div>

            <div>

                <van-popup v-model="showAddress" position="bottom">
                    <van-area :area-list="areaList" @confirm="sure" @cancel="exit" />
                </van-popup>

            </div>

            <van-cell-group>
                <van-field v-model="address_detail" rows="2" type="textarea" placeholder="详细地址:如道路，小区，门牌号等" /></van-cell-group>

        </div>





    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/base_bai/vue.js"></script>
<script src="../../script/base_bai/vant.js"></script>
<script src="../../script/base_bai/area.js"></script>
<script src="../../script/base_bai/base.js"></script>
<script src="../../script/base_bai/temp.js"></script>
<script type="text/javascript">
    apiready = function() {
        headerH = $api.fixStatusBar($api.byId('app'));
        Vue.prototype.$ac = api;
        initVue()

    };
    if(BrowserType()=='pc'){
        initVue()
    }

    function initVue() {
        new Vue({
            el: '#app',
            data: temp.address.address_Edit_Add,
            methods: {

                //头部导航点击返回事件
                onClickLeft() {
                    // vant.Toast('返回');
                    closeWin()
                },

                // 点击展示地址弹窗
                showAddressChuang() {
                    this.showAddress = true
                },

                // 三级联动点击确定按钮事件
                sure(val) {

                    this.address_val = val[0].name + "/" + val[1].name + "/" + val[2].name
                    this.showAddress = false
                },

                // 三级联动点击取消按钮事件
                exit() {
                    this.showAddress = false
                },


            }
        });

    }
</script>

</html>
